<template>
	<view class="uni_box home">
		<navbar title='道具商城'>
			<view class="hright" slot="right" @click="gettousu">
				<text>道具记录</text>
			</view>
		</navbar>
		<view class="content">
			<!-- <view class="list">
					<image class="img_sxk" src="/static/img/img_sxk.png"></image>
					<view class="ntwo">
						<text class="shua">刷新卡</text>
						<text class="shuamiao">可将帖子刷新至首位</text>
					</view>
					<view class="ling">去购买</view>
				</view>
				<view class="list">
					<image class="img_sxk" src="/static/img/img_ckk.png"></image>
					<view class="ntwo">
						<text class="shua">查看卡</text>
						<text class="shuamiao">可查看帖子联系方式</text>
					</view>
					<view class="ling">去购买</view>
				</view>
				<view class="list">
					<image class="img_sxk" src="/static/img/img_zdk.png"></image>
					<view class="ntwo">
						<text class="shua">置顶卡</text>
						<text class="shuamiao">可将帖子置顶显示</text>
					</view>
					<view class="ling">去购买</view>
				</view> -->
			<view class="list" v-for="(item, index) in list" :key="index" @click="getitem(item)">
				<image class="img_sxk" :src="item.image"></image>
				<view class="ntwo">
					<text class="shua">{{ item.title }}</text>
					<text class="shuamiao">可将帖子置顶显示</text>
				</view>
				<view class="ling">去购买</view>
			</view>
		</view>

		<!-- 底部支付 -->
		<view class="qie">
			<u-popup v-model="zshow" mode="bottom" :closeable="false">
				<view class="qviews">
					<view class="qbiao">
						<text class="taotit">支付</text>
						<text class="rjia">¥{{ popitem.price }}</text>
					</view>
					<view class="zhilist">
						<view class="zhiitem" v-for="(item, index) in paylist" :key="index"
							:class="paytype.type == item.type ? 'zactive' : ''" @click="getzhipay(item)">
							<image class="zicon" :src="item.image ? item.image : '/static/mine/zhifubao.png'" />
							<text class="ztit">{{ item.name }}</text>
							<image class="gous" src="/static/mine/gous.png" />
							<image class="gou" src="/static/mine/gou.png" />
						</view>
					</view>
					<view class="zhibtn">
						<view class="zhileft" @click="zshow = false">取消</view>
						<view class="zhiright" @click="goumaibtn">确定</view>
					</view>
				</view>

			</u-popup>
		</view>

		<view style="display: none;width: 0;height: 0;" v-html="payForm"></view>

</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			popitem: {},

			package_user: [],
			vipindex: {},
			equitydata: [],
			content: '',
			payForm: '',
			order_id: '',
			zshow: false,
			paytype: '',
			paylist: [],
			payid: '',
			payForm: '',
			newpayinfo: {},
		}
	},
	onLoad() {
		this.getinit()
		this.getPayList()
	},
	onShow() {
	},
	methods: {
		async getPayList() {
			let method = 'wap'
			// #ifdef APP-PLUS
			method = 'app'
			// #endif
			let res = await this.$u.api.vipgetPayList({
				mark: 'recharge',
				method: method
			});
			this.paylist = res
			this.paytype = res[0]
		},
		getzhipay(item){
			this.paytype = item
		},
		async getinit() {
			let res = await this.$u.api.getListByShop({
			});
			this.list = res
		},
		gettousu() {
			// this.navrouter("/pages_subject/twoPage/TouSuRecord");
			this.navrouter("/pages/TPage/NDaoRecord");
		},
		getitem(item) {
			this.zshow = true
			this.popitem = item
		},

		async goumaibtn() {
			let res = await this.$u.api.addOrderzhi({
				// type:'1',
				id: this.popitem.id
			});
			// console.log(res)
			// return;
			this.payid = res.order_id
			if (this.paytype.type == 'wechat') {
				//微信
				this.getpay();
			} else if (this.paytype.type == 'alipay') {
				//支付宝
				this.getpayali();
			} else {
				this.$u.toast("暂未开通支付方式");
			}
		},
		async getpay() {
			let method = 'wap'
			// #ifdef APP-PLUS
			method = 'app'
			// #endif
			let res = await this.$u.api.payByProp({
				id: this.payid,
				method:method,
				paytype:this.paytype.type
			});
			console.log(res)
			console.log(JSON.parse(res).appid)
			let data = JSON.parse(res)
			this.newpayinfo = data
			this.zhifu()
		},
		async getpayali() {
			let method = 'wap'
			// #ifdef APP-PLUS
			method = 'app'
			// #endif
			let res = await this.$u.api.payByProp({
				id: this.payid,
				method: method,
				paytype:this.paytype.type
			});
			console.log(res)
			// console.log(JSON.parse(res).appid)
			// let data = JSON.parse(res)
			this.newpayinfo = res
			this.zhifu()
		},
		async zhifu() {
			// //去支付
			// let res = await this.$u.api.vippay({
			// 	type: this.paytype,
			// 	vip_id: this.vipid
			// });
			// console.log(res)
			// #ifdef H5
			// 将接口返回的form表单显示到页面
			if (this.paytype.type == 'alipay') {
				// this.zhishow = true
				console.log(this.newpayinfo)
				this.payForm = this.newpayinfo;
				this.$nextTick(() => {
					document.forms['alipay_submit'].submit();
				});
			}
			// #endif

			// #ifdef APP-PLUS
			let payinfo = 'alipay'
			if (this.paytype.type == 'alipay') {
				payinfo = 'alipay'
			} else if (this.paytype.type == 'wechat') {
				payinfo = 'wxpay'
			}
			console.log(this.newpayinfo)
			console.log(payinfo)
			uni.requestPayment({ //拿到订单信息后 调用 uniapp的支付接口 唤起支付
				provider: payinfo, //微信就是 wxpay
				orderInfo: this.newpayinfo, //支付宝订单数据 从后端拿到的数据
				success: function (res) {
					uni.showToast({
						title: "支付成功",
						icon: 'success',
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 500)
						}
					})
				},
				fail: function (err) {
					console.log("++++++")
					console.log(err)
					uni.showToast({
						title: "支付失败请稍后再试",
						icon: 'none',
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 500)
						}
					})
					console.log('fail:' + JSON.stringify(err));
				}
			});
			// #endif

		},

	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F5F5F5;
}

.content {
	background-color: #F5F5F5;
	min-height: 100vh;
	padding-top: 30rpx;
	.list {
		padding: 35rpx 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin:0 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.img_sxk {
			width: 100rpx;
			height: 100rpx;
			margin-right: 15rpx;
		}

		.ntwo {
			display: flex;
			flex-direction: column;

			.shua {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			.shuamiao {
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				display: block;
				margin-top: 15rpx;
			}
		}

		.ling {
			width: 149rpx;
			height: 53rpx;
			background: #3A96FD;
			border-radius: 27rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-left: auto;
		}
	}
}

.qie {
	/deep/.u-drawer-bottom {
		background-color: transparent;
	}

	.qielist {
		height: 90%;

		.qieitem {
			padding: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1rpx solid #EDEDED;
		}
	}

	.qviews {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx 0rpx;
		// #ifdef APP-PLUS
		padding-bottom: 150rpx;

		// #endif
		.qbiao {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 15rpx;
			// margin-left: 30rpx;
			padding: 0 30rpx;
			// width: 100%;
		}

		.taotit {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.rjia {
			margin-left: auto;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2A7CFC;
		}

		.zhilist {
			display: flex;
			flex-direction: column;

			.zhiitem {
				padding: 20rpx;
				border-bottom: 1rpx solid #EDEDED;
				display: flex;
				flex-direction: row;
				align-items: center;

				.zicon {
					width: 78rpx;
					height: 78rpx;
					margin-right: 13rpx;
				}

				.ztit {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.gous {
					margin-left: auto;
					width: 36rpx;
					height: 36rpx;
					display: none;
				}

				.gou {
					margin-left: auto;
					width: 36rpx;
					height: 36rpx;
					display: inline-block;
				}

			}

			.zactive {
				.gous {
					margin-left: auto;
					width: 36rpx;
					height: 36rpx;
					display: inline-block;
				}

				.gou {
					margin-left: auto;
					width: 36rpx;
					height: 36rpx;
					display: none;
				}
			}
		}

		.zhibtn {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 30rpx;

			.zhileft {
				width: 206rpx;
				height: 72rpx;
				border: 1px solid #CFCFCF;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				margin: 0 20rpx;

			}

			.zhiright {
				width: 206rpx;
				height: 72rpx;
				// background: #2A7CFC;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				box-shadow: 2rpx 5rpx 9rpx 1rpx rgba(198, 174, 119, 0.2);
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: 0 20rpx;
			}
		}
	}
}</style>
